<template>
  <div class="container">
    <van-nav-bar
      title=""
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <div class="body">
      <van-progress style="width: 95%;margin: 10px auto;" :percentage="Math.floor(now*100/5)"/>

      <div class="list" :style="obj" ref="element">
        <div class="item" v-for="i in 6" :key="i" @touchstart="a" @touchend="b">
          <div v-if="i<6" class="box">
            <div class="tag">
              单选题
            </div>
            <div class="cnt">
              2. 线性表采用链式存储时，其地址( )
            </div>
            <div class="options" v-for="(item,i) in options" :key="i">
              {{ item.value }}
            </div>

          </div>
          <div class="sub" v-if="i==6">

             <span v-for="i in 5">
               {{ i }}
             </span>
          </div>
        </div>
      </div>
      <div class="btn">
        <template v-if="now<5">
          <van-button type="success" size="normal" text="上一道" @click="last"></van-button>
          <span style="display: inline-block;width: 20px;"></span>
          <van-button type="success" text="下一道" @click="next"></van-button>
        </template>
         <template v-if="now==5">
          <van-button type="success" size="normal" text="上一道" @click="last"></van-button>
          <span style="display: inline-block;width: 20px;"></span>
          <van-button type="success" text="提交题目" @click="sub"></van-button>
        </template>

      </div>

    </div>

  </div>
</template>

<script>
export default {
  name: "test",
  data() {
    return {
      now: 0,
      s: 0,
      end: 0,
      dif: 0,
      options: [{
        value: "A、O(m2)  "
      },
        {
          value: "b、O(m2)  "
        },
        {
          value: "c、O(m2)  "
        },
        {
          value: "d、O(m2)  "
        },],
      obj: {
        transform: 'translateX(0)'
      },
    }
  },
  methods: {
    a(e) {
      this.s = e.changedTouches[0].screenX
    },
    onClickLeft() {
      history.back()
    },
    next() {
      console.log(this.now)
      if (this.now < 5) {
        this.now++
        console.log(this.now)
        const x = this.now * 375
        this.obj.transform = 'translateX(-' + x + 'px)'
      }

    },
    last() {
      if (this.now > 0) {
        this.now--
        const x = this.now * 375
        this.obj.transform = 'translateX(-' + x + 'px)'
      }
    },
    b(e) {
      this.end = e.changedTouches[0].screenX
      this.sub = this.s - this.end
      if (this.sub > 0) this.next(this.sub)
      else if (this.sub < 0) this.last(this.sub)
    }


  }
}
</script>

<style scoped lang="less">

.container {

  width: 100vw;
  overflow-x: hidden;
  height: 100vh;
}

.body {
  min-height: 570px;
  width: 95%;
  margin: 14px auto;
  overflow-x: hidden;

  .list {
    min-height: 400px;
    margin: 10px 0;
    width: 2250px;
    transition: all .6s linear 0s;
    display: flex;
    flex-direction: row;
  }

  .item {
    height: 100%;
    width: 375px;
    .sub{
      margin:30px  auto;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: space-around;
      span{
        display: inline-block;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        text-align: center;
        line-height: 30px;
        color:#ffffff;
        font-weight:bolder;
        background-color: #409EFF;
      }
    }

    .box {
      width: 90%;
      background-color: white;
      margin: 10px auto;
      display: flex;
      flex-direction: column;

      .tag {
        color: #069f06;
        background-color: #e0ffec;
        height: 30px;
        line-height: 30px;
        text-align: center;
        width: 100px;
        border-radius: 7px;
        font-size: 14px;
        margin: 10px 0;

      }

      .cnt {
        text-align: start;
      }

      .options {
        text-align: start;
        margin: 10px;
      }

    }

  }

}
</style>
